<template>
	<view class="content">

		<view class="backGround" :style="{background: `url(${imgaeUrl('/static/home/bgb.png')})`}">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999;">
				<view class="backGround" :style="{background: `url(${imgaeUrl('/static/home/bgb.png')})`}">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<view @click="navigateBack()" class="margin-top-05">
								<uv-icon name="arrow-left" color="#FFFFFF" size="20"></uv-icon>
							</view>
							<view class="font-size-32 color-FFF font-weight-500">
								热推直播间
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
			<view :style="{height: (s+n) +'px'}">
			</view>
		</view>
		<view class="view-list">
			<view class="" style="padding: 24rpx;">
				<view @click="navigateTo('/pages/Mine/cooperate/cooperate')"
					class="view display-flex space-between align-items" style="padding: 18rpx 24rpx	;">
					<view class="font-size-28 font-weight-500">
						我是主播/达人
					</view>
					<view class="botton display-flex center align-items font-size-24 font-weight-500"
						style="color: #FE7335;">
						联系合作
					</view>
				</view>
				<!-- <view class="margin-top-20">
					<uv-search bgColor="#FFFFFF" size="12" :showAction="false" placeholder="搜索粉丝手机号、昵称、ID"
						v-model="keyword">
						<template slot="suffix">
							<view class="button color-FFF font-size-22" style="padding: 10rpx 36rpx; ">
								搜索
							</view>
						</template>
					</uv-search>
				</view> -->
				<!-- <view class="display-flex  align-items margin-top-20 space-between">
					<view style="width: 80%;" class="display-flex space-between align-items">
						<view class="tabs-active">
							全部
						</view>
						<view class="tabs">
							达人
						</view>
						<view class="tabs">
							店铺
						</view>
						<view class="tabs">
							明星
						</view>
					</view>
					<image src="/static/home/gd.png" style="width: 60rpx;height: 60rpx;" mode=""></image>
				</view> -->
				<view class=" margin-top-20">


					<view v-for="item,index in roomlist" :key="index"
						@click="navigateTo('/pages/Home/roomDetails/roomDetails?id=' + item.id)"
						class="view margin-top-30 position-relative">
						<view v-if="item.type == 1" class="center-size-20 label2 position-absolute"
							style="top: 0;color: #FE693E; right: 0;">
							{{item.start_time}}
						</view>
						<view class="display-flex" style="padding: 24rpx;">
							<view class="yuan position-relative border-radius display-flex center align-items">
								<image :src="item.images" class="border-radius" style="width: 108rpx;height: 108rpx;"
									mode=""></image>
								<view v-if="item.type == 1"
									class="room-title position-absolute transform-translate-left"
									style="left: 50%;background: #FFEEEA;bottom: -5rpx;color: #FF351B;">
									预约中
								</view>
								<view v-if="item.type == 2"
									class="room-title button color-FFF position-absolute transform-translate-left"
									style="left: 50%;bottom: -5rpx;">
									直播中
								</view>
							</view>
							<view class="file-1 margin-left-20">
								<view class="font-size-28 font-weight-500 ">
									{{item.title}}
								</view>
								<view class="display-flex margin-top-15 align-items">
									<view class="label center-size-20 color-FFF">
										最高返
									</view>
									<view style="color: #FE693E;" class="label1 center-size-20">
										{{item.rate}}%
									</view>
								</view>
								<view class="font-size-22 margin-top-10 color-666 webkit-line-clamp"
									style="-webkit-line-clamp: 1;">
									{{item.description}}
								</view>
								<view class="display-flex space-between margin-top-10 align-items">
									<view class="user display-flex center align-items">
										<uv-avatar-group :urls="item.user_headimg" size="16"
											gap="0.4"></uv-avatar-group>
										<view class=" margin-left-10" style="font-size: 18rpx;color: #808080;">
											{{(item.num / 10000).toFixed(2)}}万+推广
										</view>
									</view>
									<view class="button color-FFF font-size-22" style="padding: 10rpx 20rpx; ">
										去推广
									</view>
								</view>
								<view class="" style="height: 10rpx;">

								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="islod" class="margin-top-20 display-flex center align-items">
					<image :src="imgaeUrl('/static/lod.gif')" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view class="font-size-26 margin-left-10 color-666">
						正在加载...
					</view>
				</view>
				<view v-else class="padding-about-24">
					<uv-divider text="数据加载完毕"></uv-divider>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack,
		timestampToDate
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	const pagingState = ref(false)
	const page = ref(1)
	const islod = ref(true)
	const roomlist = ref([]) //热门视频
	onLoad(function(option) {
		getLive()
	});
	onShow(function() {});
	/** 获取热门视频*/
	async function getLive() {
		let object = {
			page: page.value,
		}
		if (!pagingState.value) {
			const {
				code,
				data
			} = await api.getLive(object)
			roomlist.value = roomlist.value.concat(data.data)
			islod.value = !islod.value
			if (!data.has_more) {
				pagingState.value = true
				return
			}
			page.value++
		}
	}
	onReady(function() {});
	onReachBottom(function() {
		if (!pagingState.value) {
			islod.value = !islod.value
		}

		getLive()
	});
</script>

<style scoped lang="scss">
	::v-deep .uv-avatar-group__item__show-more {
		display: none !important;
	}

	.label2 {
		width: 152rpx;
		height: 40rpx;
		background: #F6F6F6;
		border-radius: 0rpx 24rpx 0rpx 12rpx;
	}

	.label1 {
		width: 68rpx;
		height: 28rpx;
		background: #FFFFFF;
		border-radius: 0rpx 6rpx 6rpx 0rpx;
		border: 2rpx solid #FE683F;

	}

	.center-size-20 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}

	.label {
		width: 80rpx;
		height: 32rpx;
		background: linear-gradient(270deg, #FE6740 0%, #FE8B1D 100%);
		border-radius: 4rpx 0 0 4rpx;
	}

	.room-title {
		width: 92rpx;
		height: 32rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}

	.yuan {
		width: 124rpx;
		height: 124rpx;
		border: 2rpx solid #FE6B3C;
	}

	.tabs,
	.tabs-active {
		width: 126rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;

	}

	.tabs-active {
		border: 1rpx solid #FF351B;
		color: #FF351B;
		font-weight: 500;
	}

	.tabs {
		color: #131315;
		border: 1rpx solid #FFFFFF;
	}

	.botton {
		width: 160rpx;
		height: 64rpx;
		background: #F5F4F4;
		border-radius: 32rpx;
	}

	.view {
		background: #FFFFFF;
		border-radius: 24rpx;
	}

	.view-list {
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		margin-top: -75rpx;
		background: #F5F5F5;
	}

	.backGround {
		width: 750rpx;
		height: 472rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}
</style>